<template>
    <view class="content">
        <view class="home">
            <view class="info-box">
                <image style="width: 100%; height: 300upx;" src="../../static/img/home-bgm.png"></image>
                <view class="info">
                    <view class="logo">
                        <span class="head"></span>
                        <span class="name">Amber</span>
                    </view>
                    <view class="word">
                        <view class="mobile">13477301111</view>
                    </view>
                </view>
            </view>
            <uni-list>
                <uni-list-item title="用户信息" 
                    show-extra-icon="true" 
                    :extra-icon="{color: '#00bcd4',size: '22',type: 'contact'}">
                </uni-list-item>
                <uni-list-item title="设置" 
                    show-extra-icon="true" 
                    :extra-icon="{color: '#00bcd4',size: '22',type: 'gear'}">
                </uni-list-item>
                <uni-list-item title="联系我们" 
                    show-extra-icon="true" 
                    :extra-icon="{color: '#00bcd4',size: '22',type: 'chatboxes'}">
                </uni-list-item>
            </uni-list>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import uniList from '@dcloudio/uni-ui/lib/uni-list/uni-list.vue'
    import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue'
    import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue"
    export default {
        computed: {
            ...mapState(['hasLogin', 'forcedLogin'])
        },
        methods: {
            ...mapMutations(['logout']),
            bindLogin() {
                uni.navigateTo({
                    url: '../login/login',
                });
            },
            bindLogout() {
                this.logout();
                /**
                 * 如果需要强制登录跳转回登录页面
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../login/login',
                    });
                }
            }
        },
        components: {
            uniListItem,
            uniList
        },
    }
</script>

<style lang="scss" scoped>
    .home{
        height: 100%;
        .uni-list{
        }
        .info-box{
            height: 430upx;
            background-color: #fff;
            position: relative;
            .info{
                top: 50upx;
                position: absolute;
                width: 90%;
                margin: auto;
                left: 0;
                right: 0;
                height: 350upx;
                background: #2358a8;
                border-radius: 10px;
                color: #efefef;
                .logo{
                    height: 100upx;
                    margin: 30upx;
                    .head{
                        background-color: #fff;
                        height: 120upx;
                        width: 120upx;
                        background-size: 100upx 100upx;
                        background-repeat: no-repeat;
                        background-position: center;
                        border-radius: 100px;
                        background-image: url("../../static/img/qq.png");
                    }
                    .name{
                        margin-left: 20upx;
                    }
                    >span{
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
                .word{
                    margin: 100upx 30upx;
                }
            }
        }
    }
</style>
